<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="interval">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Triangle Column Plot</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    const Shape = G2.Shape;
    Shape.registerShape('interval', 'triangle', {
      getPoints(cfg) {
        const { x, y, y0, size } = cfg;
        return [
          { x: x - size / 2, y: y0 },
          { x, y },
          { x: x + size / 2, y: y0 }
        ];
      },
      draw(cfg, group) { // 自定义最终绘制
        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
        const polygon = group.addShape('polygon', {
          attrs: {
            points: [
              [ points[0].x, points[0].y ],
              [ points[1].x, points[1].y ],
              [ points[2].x, points[2].y ]
            ],
            fill: cfg.color
          }
        });
        return polygon; // 将自定义Shape返回
      }
    });

    const data = [
      { month: 'Jan', type: '1929-2008', value: 1.22 },
      { month: 'Jan', type: '1988-2008', value: 0.74 },
      { month: 'Jan', type: '1998-2008', value: -0.99 },
      { month: 'Feb', type: '1929-2008', value: 0.1 },
      { month: 'Feb', type: '1988-2008', value: 0.51 },
      { month: 'Feb', type: '1998-2008', value: -0.43 },
      { month: 'Mar', type: '1929-2008', value: 0.21 },
      { month: 'Mar', type: '1988-2008', value: 0.48 },
      { month: 'Mar', type: '1998-2008', value: 1.04 },
      { month: 'Apr', type: '1929-2008', value: 1.36 },
      { month: 'Apr', type: '1988-2008', value: 2.39 },
      { month: 'Apr', type: '1998-2008', value: 2.75 },
      { month: 'May', type: '1929-2008', value: 0.57 },
      { month: 'May', type: '1988-2008', value: 1.64 },
      { month: 'May', type: '1998-2008', value: 0.31 },
      { month: 'Jun', type: '1929-2008', value: 1.35 },
      { month: 'Jun', type: '1988-2008', value: -0.76 },
      { month: 'Jun', type: '1998-2008', value: -1.52 },
      { month: 'Jul', type: '1929-2008', value: 0.77 },
      { month: 'Jul', type: '1988-2008', value: 1.08 },
      { month: 'Jul', type: '1998-2008', value: -0.51 },
      { month: 'Aug', type: '1929-2008', value: -1.46 },
      { month: 'Aug', type: '1988-2008', value: -1.14 },
      { month: 'Aug', type: '1998-2008', value: -0.74 },
      { month: 'Sep', type: '1929-2008', value: -0.02 },
      { month: 'Sep', type: '1988-2008', value: -1.23 },
      { month: 'Sep', type: '1998-2008', value: -2.72 },
      { month: 'Oct', type: '1929-2008', value: 0.6 },
      { month: 'Oct', type: '1988-2008', value: 1.13 },
      { month: 'Oct', type: '1998-2008', value: 2.11 },
      { month: 'Nov', type: '1929-2008', value: 1.41 },
      { month: 'Nov', type: '1988-2008', value: 1.62 },
      { month: 'Nov', type: '1998-2008', value: 1.45 },
      { month: 'Dec', type: '1929-2008', value: 1.6 },
      { month: 'Dec', type: '1988-2008', value: 1.78 },
      { month: 'Dec', type: '1998-2008', value: 1.41 }
    ];

    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight,
      background: {
        fill: 'black'
      }
    });

    chart.source(data);
    chart.tooltip({
      crosshairs: false
    });
    chart.legend({
      title: null,
      textStyle: {
        fill: '#c3e4ed'
      }
    });
    chart.axis('value', {
      label: {
        formatter(val) {
          return val + '%';
        },
        textStyle: {
          fill: '#c3e4ed'
        }
      },
      tickLine: null,
      line: null,
      title: null,
      grid: {
        lineStyle: {
          lineDash: [ 1, 1 ],
          stroke: '#c3e4ed',
          strokeOpacity: 0.5
        }
      }
    });
    chart.axis('month', {
      title: null,
      tickLine: null,
      line: {
        lineDash: [ 1, 1 ],
        stroke: '#c3e4ed',
        strokeOpacity: 0.5
      },
      subTickCount: 1, // 次刻度线个数
      subTickLine: {
        lineWidth: 2,
        stroke: '#becfd4',
        length: 20
      },
      grid: {
        align: 'center',
        alternateColor: [ '#333', '#000' ]
      },
      label: {
        textStyle: {
          fill: '#becfd4'
        }
      }
    });
    chart.intervalDodge().position('month*value').color('type*value', (type, value) => {
      if (value < 0) {
        return 'l(90) 0:#ccc 1:#00baf0';
      } else if (type === '1929-2008') {
        return '#00baf0';
      } else if (type === '1988-2008') {
        return '#006a89';
      } else if (type === '1998-2008') {
        return '#004357';
      }
    })
    .shape('triangle');
    chart.render();
  </script>
</body>

</html>
